﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>方向优先级</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../../Portal/icons/font-icons.min.css" />
    <script type="text/javascript" src="../../Portal/js/sortjs/Sortable.min.js"></script>
    <!--- 引入代码. -->
    <script src="../../Scripts/jquery/jquery.min.js"></script>
    <script src="../../Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../../Scripts/config.js" type="text/javascript"></script>
    <script src="../../Comm/Gener.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Portal/js/vue/vue.js"></script>
    <script src="../../Scripts/layui/LayuiDialog.js"></script>
    <script src="../../Scripts/layui/layui/layui.js"></script>
    <link href="../../Scripts/layui/layui/css/layui.css" rel="stylesheet" />

    <base target="_self" />
    <style>
        .method {
            width: 98%;
            margin: 10px auto;
        }

            .method .row {
                display: flex;
                justify-content: flex-start;
                flex: 0.2;
                height: 40px;
                line-height: 40px;
                background-color: #FAFAFA;
            }

                .method .row .item {
                    box-sizing: border-box;
                    flex-shrink: 0;
                    text-align: center;
                    border-right: 1px solid #eee;
                    border-bottom: 1px solid #eee;
                }

        .item-num {
            width: 10%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item-nodeid {
            width: 10%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item-other {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .method .row .folder-item {
            box-sizing: border-box;
            width: 80%;
            padding-left: 20px;
            cursor: pointer;
        }

        .wrapper .row {
            background-color: #fff;
        }

        #s-main {
            transition: all ease .4s;
            margin-top: 50px;
        }

        .fixed {
            position: fixed;
            top: 10px;
            left: 1%;
            width: 98%;
        }

        [v-cloak] {
            display: none;
        }

        .layui-input-block > .layui-form-switch {
            margin-top: 0 !important;
        }

        .method fieldset {
            padding: 0px;
            margin: 20px 0px 18px;
            font-size: 14px;
            border: 1px solid #e6e6e6;
        }

            .method fieldset img {
                margin: 10px;
                max-width: calc(100% - 20px)
            }

        .method legend {
            margin-left: 20px;
            font-size: 15px;
            width: auto;
        }

            .method legend label {
                cursor: pointer;
                padding: 0 10px;
                font-family: "iconfont";
                position: relative
            }

        .method fieldset ul {
            padding: 15px;
            line-height: 28px;
        }
    </style>
</head>
<body>

    <div class="method" id="method" v-cloak=v-cloak>
        <div class="row fixed">
            <div class="item item-num"><i class="icon-app"></i> 顺序号</div>
            <div class="item item-nodeid">从节点ID</div>
            <div class="item item-nodeid">到节点ID</div>
            <div class="item item-other">名称(顺序支持拖动.)</div>
        </div>
        <div class="wrapper" id="s-main" ref="child-row">
            <div v-for="(flows,index) in flows" :key="index" :data-id="flows.MyPK">
                <div class="row item-name-dp" :data-id="flows.MyPK" :data-idx="index">
                    <div class="item item-num item-index" style="text-align: right;">{{index + 1}}</div>
                    <div class="item item-nodeid">
                        <span> <font color="blue">{{flows.Node}}</font></span>
                    </div>
                    <div class="item item-nodeid">
                        <span> <font color="blue">{{flows.ToNode}}</font></span>
                    </div>
                    <div class="item item-other">{{flows.Name}}</div>
                </div>
            </div>
        </div>


        <fieldset id="help">
            <legend id="help"><label> 什么是方向条件的优先级?</label></legend>
            <ul>
                <li>在转向中，如果出现一个以上的路线都成立时时，系统就会按照第一个路线来计算，那一个排列最前面就按照那一个计算。</li>
                <li>例如：在demo中002.请假流程，如果一个人员既有基层岗，也有中层岗那么到达基层与中层的路线都会成立，如果设置了方向条件的优先级，系统就会按照优先满足的条件的路线计算。</li>
                <li>只有一个方向条件的小于等于1就不能设置。</li>
            </ul>
        </fieldset>
    </div>
    <script>
        new Vue({
            el: '#method',
            data: {
                flows: [],

            },
            methods: {
                MoveItem(currentNodeArrStr, currentNodeId) {

                    //alert(currentNodeArrStr);
                    //return;

                    // todo 需要重新实现接口
                    var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_Cond");
                    handler.AddPara("MyPKs", currentNodeArrStr);
                    handler.AddPara("FK_Node", GetQueryString("FK_Node"));

                    var data = handler.DoMethodReturnString("CondPRI_Move");
                    layer.msg(data);
                },
                initSortArea: function () {
                    var _this = this
                    this.$nextTick(function () {
                        var childSortableContainers = this.$refs['child-row']

                        new Sortable(childSortableContainers, {
                            animation: 150,
                            dataIdAttr: 'data-id',
                            ghostClass: 'blue-background-class',
                            onStart: function ( /**Event*/ evt) {
                                _this.loadingDialog = layer.msg('正在移动...', {
                                    timeout: 900 * 1000
                                })
                            },
                            onEnd: function (evt) {
                                /**
                                 * 这里区分两种情况，一种是跨列移动，一种非跨列移动
                                 * 如果跨列移动，可以利用以下四个参数来实现
                                 *

                                 * @param currentNodeArrStr 移入的列的子节点排序
                                 * @param currentNodeId     移入的列的节点id
                                 *
                                 * 假如非跨列，此时被移出的和移入的为同一个，使用前两个参数或者后两个参数都可以实现
                                 */
                                layer.close(_this.loadingDialog)
                                var currentNodeArrStr = Array.from(evt.to.querySelectorAll('div[data-id]')).map(function (item) {
                                    return item.dataset.id
                                }).join(',')
                                var currentNodeId = evt.to.dataset.id
                                // 二级菜单的排序
                                _this.MoveItem(currentNodeArrStr, currentNodeId)
                            }
                        })
                    })
                },
                //查询

            },
            mounted: function () {

                // fix firefox bug
                document.body.ondrop = function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                //获得数据源.
                var fk_flow = GetQueryString("FK_Flow");
                var fk_Node = GetQueryString("FK_Node");

                var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_Cond");
                handler.AddUrlData();

                var data = handler.DoMethodReturnString("CondPRI_Init");
                if (data.indexOf('err@') == 0) {
                    $("#Msg").html("<font color=red>加载失败:<br>" + data + "</font> .");
                    return;
                }

                if (data.indexOf('info@') == 0) {
                    $("#Msg").html("<font >提示:<br>" + data + "</font> .");
                    return;
                }

                //转json.
                var conds = JSON.parse(data);
                console.log(conds);
                for (var i = 0; i < conds.length; i++) {
                    var cond = conds[i];
                    var nd = new Entity("BP.WF.Template.NodeSimple", cond.ToNode);
                    cond.Name = nd.Name;
                }
                this.flows = conds;

                this.initSortArea();
                layui.use('form', function () {
                    var form = layui.form;
                    form.render()

                });
                var _this = this
                setTimeout(function () {
                    _this.expandAll = true
                }, 300)
            }
        })




    </script>
</body>
</html>
